<template>
	<div class="tabs-box">
		<scroll-view :scroll-x="true" scroll-with-animation class="tabs-scroll-view" :show-scrollbar="false">
			<div class="tabs-box-nav">
				<div class="tabs-box-nav-item" :class="{ active: item['_id'] === selectClassifyValue }" @click="classifyCLick(index, item)"
					v-for="(item, index) in listData" :key="index">
					<span class="text">{{ item.name }}</span>
				</div>
			</div>
		</scroll-view>
	</div>
</template>

<script setup>
	import tools from '@/utils/tools/index.js'
	import { useGeneralStore } from '@/store/general.js'
	import { ref, reactive, onMounted, computed } from 'vue';

	const emits = defineEmits(['change']);

	const generalStore = useGeneralStore();

	const selectClassifyValue = ref('');

	const listData = computed(() => {
		const list = tools.deepCopy(generalStore.menuList);
		list.unshift({ _id: '', name: '全部' });
		return list;
	});

	/**
	 * @desc 分类切换
	 * @param {Number} index 索引
	 * @param {object} item value
	 */
	function classifyCLick(index, item) {
		emits('change', { index, item });
		selectClassifyValue.value = item['_id'];
	}
</script>

<style lang="scss" scoped>
	.tabs-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;

		.tabs-scroll-view {
			white-space: nowrap;

			& ::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
			}

			.tabs-box-nav {
				display: flex;
				flex-direction: row;

				.tabs-box-nav-item {
					color: #666d7d;
					display: block;
					margin: 0 15rpx;
					background: $uv-bg-color;
					font-size: 26rpx;
					padding: 6rpx 20rpx;
					border-radius: 3px;
					color: $uv-tips-color;

					&.active {
						background: $uv-primary;
						color: #fff;
					}

					&:first-child {
						margin-left: 0;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>